<template>
    <div class="search-component" v-show="show.show">
        <!-- 搜索区域 -->
        <div class="search-header">
            <div class="close" @click="show.show=false"></div>
            <div class="search-wrap">
                <div class="search-input-wrap">
                    <input type="text" class="search" placeholder="请输入宝贝名称" value="" v-model="keyword"/>
                </div>
                <button type="button" class="search-btn" @click="goSearch()"></button>
            </div>
        </div>
        <!-- 热门区域 -->
        <div class="search-main" v-if="historyKeywords.length>0">
            <div class="search-title-wrap">
                <div class="search-title">最近搜索</div>
                <div class="bin" @click="clearHistoryKeywords()"></div>
            </div>

            <div class="search-keywords-wrap">
                <div class="keywords" v-for="(item,index) in historyKeywords" :key="index" @click="goSearch(item)">{{ item }}</div>
            </div>
        </div>

        <div class="search-main">
            <div class="search-title-wrap">
                <div class="search-title">热门搜索</div>
            </div>

            <div class="search-keywords-wrap">
                <!-- 把热门搜索中的内容在点击的时候传送到搜索历史中，添加一个点击事件把item.title当做参数进行传送 -->
                <div class="keywords" v-for="(item,index) in hotKeywords" :key="index" @click="goSearch(item.title)">{{ item.title }}</div>
            </div>
        </div>
    </div>
</template>

<script> 
import {mapMutations,mapState,mapActions} from 'vuex'
import { Dialog } from 'vant';
export default {
    name:"my-search",
    data () {
        return {
            keyword:""
        }
    },
    computed:{
        ...mapState({
            "historyKeywords":state=>state.search.historyKeywords,
            "hotKeywords":state=>state.search.hotKeywords
        })
    },
    created () {
        //创建一个数组，把每次搜索的词汇放进数组中，声明一个全局数组
        this.keywords=this.historyKeywords?this.historyKeywords:[];
        this.getHotKeyword();
    },
    //接收来自父组件index.vue的值
    props:{
        show:{
            type:Object,
            default:{},
        },
        isLocal:{
            type:Boolean,
            default:false,
        }
    },
    methods:{
        ...mapMutations({
            "SET_KEYWORDS":"search/SET_KEYWORDS",
            "CLEAR_KEYWORDS":"search/CLEAR_KEYWORDS"
        }),
        ...mapActions({
            "getHotKeyword":"search/getHotKeyword"
        }),
        /*
            注意：此时不能直接改变父组件传过来的值，虽然有效，但是会报错，而且只能执行一次，再次点击的时候就不生效了
            解决方式：可以通过子组件给父组件传值的方式来解决
        */
        // close(){
        //     this.$emit("close")
        // }
        goSearch (keyword) {
            //通过设置变量来判断，如果热门搜索有值，那么走热门搜索，如果搜索框有值，在走搜索框，如果都没有就为空
            let tmpKeyword = keyword || this.keyword || "";
            /*
                每次输入的时候要用unshift，因为后输入的要在前面，但是如果上一次的内容不变的话，一样会存进数组中
                这就造成了重复的现象，所以需要去除重复,使用i--，是为了防止在删除的时候容易产生错乱的问题，无顺序问题
                都调整好了之后，就需要通过vuex来进行管理了

                问题：数组中的值虽然渲染上去了，但是如果没有值按搜索的话，空白值会显示上去
                解决方式：判断一下，判断this.keyword是否存在，存在渲染，不存在不渲染
            */
           if (tmpKeyword) {
                if (this.keywords.length > 0) {
                for (let i = 0; i < this.keywords.length; i++) {
                    if (this.keywords[i] === tmpKeyword) {
                        this.keywords.splice(i--,1)
                    }
                }
            }
            this.keywords.unshift(tmpKeyword);
            this.SET_KEYWORDS({historyKeywords:this.keywords})
           }
           //跳转到筛选的页面
        //    this.$router.push("/goods/search?keyword="+tmpKeyword);
           //直接跳转到首页，而不是跳转到上一个内容页
           this.show.show=false;
           if (this.isLocal) {
               this.$router.replace("/goods/search?keyword="+tmpKeyword);
           }else{
               this.$router.push("/goods/search?keyword="+tmpKeyword);
           }
        },
        //删除需要样式，使用vant样式，按需引入,配置bobel7,配置到babel.config.js文件中
        clearHistoryKeywords(){
            if (this.historyKeywords.length > 0) {
                Dialog.confirm({
                title: '',
                message: '确认要删除吗??'
                }).then(() => {
                    this.CLEAR_KEYWORDS();
                }).catch(()=>{

                })
            }
        }
    }
}
</script>

<style scoped>
    .search-component {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 99;
        left: 0px;
        top: 0px;
        background-color: #ffffff;
    }
    .search-component .search-header {
        width: 100%;
        height: 1rem;
        border-bottom: 1px solid #EFEFEF;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items:center; 
    }
    .search-component .search-header .close {
        width: 0.5rem;
        height: 0.5rem;
        background-image: url("../../assets/images/common/search_x.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
        margin-left: 0.2rem;
        margin-right: 0.2rem;
    }
    .search-component .search-header .search-wrap {
        width: 78%;
        height: 0.64rem;
        border: 1px solid #B2B2B2;
        border-radius: 0.1rem;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items:center;
    }
    .search-component .search-header .search-wrap .search-input-wrap {
        width: 85%;
        height: 100%;
        border-right: 1px solid #B2B2B2;
    }
    .search-component .search-header .search-wrap .search {
        width: 80%;
        height: 93%;
        margin-left: 0.2rem;
        font-size: 0.28rem;
    }
    .search-component .search-header .search-wrap .search-btn {
        width: 0.5rem;
        height: 0.5rem;
        background-image: url("../../assets/images/common/search_icon.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #ffffff;
        border: 0px none;
        outline: none;
        margin-left: 0.15rem;
    }
    .search-component .search-main {
        width: 100%;
        margin-top: 0.2rem;
    }
    .search-component .search-main .search-title-wrap {
        width: auto;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
    .search-component .search-main .search-title-wrap .search-title {
        width: auto;
        font-size: 0.28rem;
    }
    .search-component .search-main .search-title-wrap .bin {
        width: 0.4rem;
        height: 0.4rem;
        background-image: url("../../assets/images/common/bin.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
    .search-component .search-main .search-keywords-wrap {
        width: auto;
        display: flex;
        display: -webkit-flex;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
        margin-top: 0.3rem;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
    }
    .search-component .search-main .search-keywords-wrap .keywords {
        width: 26%;
        height: 0.6rem;
        color: #717376;
        border: #EFEFEF 1px solid;
        border-radius: 0.64rem;
        font-size: 0.28rem;
        text-align: center;
        overflow: hidden;
        line-height: 0.6rem;
        margin-right: 1.3%;
        margin-left: 1.3%;
        margin-bottom: 0.2rem;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
    }
</style>